Buttons in iOS 7 Aren’t Good

In the time I’ve used iOS 7 on my very-soon-to-be-replaced iPhone 4S, one thing about its visual overhaul has persisted in my mind:

The buttons aren’t very good. In fact, they suck.

By “suck”, I don’t mean they don’t look nice — as far as buttons go, they’re gorgeous —- rather, from an accessibility point of view, they’re not user friendly at all. Buttons in iOS 7 (think: toolbar buttons in Mail) seem to be drawings of buttons — mighty thin drawings at that, almost stencil-like. As a legally blind user, the gravity of iOS 7’s UI changes is something I’m still getting accustomed to. While I love iOS 7 overall and am excited for the platform’s future, the truth of the matter isJony Ive’s re-imagining of the operating system which has spurred 700 million devices sold is not without its warts. Moreover, an argument could be made that iOS 7 is worse, considerably so, for users who suffer from various vision-related disabilities.

Here’s Federico Viticci, in “Living with iOS 7”, on buttons in iOS 7:

In a typical iOS 7 app – such as Apple’s Mail – the blue color indicates interactivity and black text means “content”. The Back button, still available in the upper left corner, isn’t contained in a capsule: now, buttons are generally pieces of colored text that lose opacity when tapped and are desatured when inactive. This choice may be confusing at first: in the iOS 6 era, buttons shaped as glossy, “fat” buttons easily meant “tap me here”. In iOS 7, their simpler, textual look disorients at first, but, in my experience, with time the color/text association becomes more natural and obvious. Text labels as tappable items/buttons have some advantages in my opinon:

  • Without a button drawn on screen, the text of a button doesn’t have physical limits – because it doesn’t have to fit inside a button of a specific shape or size. This is especially important for international users: a button’s text that looks good in English may not necessarily fit well inside a button shape in German or Chinese. While strings of text are still cut off by iOS if too long for a navigation bar or toolbar, removing the boundaries of a button’s shape gives developers more room for their localizations.

  • By reducing the use of images to indicate interactivity, apps should feel less cluttered. In theory, making interfaces less reliant on heavy, custom images should also make apps snappier and more responsive, because the OS doesn’t need to animate several images at once.

  • Without borders, buttons often feel more integrated with an app’s toolbar.

Besides interactivity, color also plays a big role in how it gives your device and your apps a unique identity.

What Federico says is true, generally, from a design perspective. However, in my experience thus far using iOS 7, I find myself yearning often for the button design of iOS 6. Say what you will about skeuomorphism, but the Jobs-and-Forstall iOS of just a couple weeks ago did a lot of things right in terms of button design, at least from an accessibility perspective. And I, for one, miss it.

In iOS 6, I could discern immediately, at a glance, what a button was and what it did. Toolbar icons were easy to read, as were navigation controls. I could distinguish between the Reply button from the Flag button in Mail. And, as I wrote for TidBITS last week, the ON/OFF switch was super easy to identify. The list goes on, but suffice it to say, there’s something to be said for the Jobs-and-Forstall design aesthetic.

In iOS 7, though, things are more difficult: toolbars across the system are much harder to make out. Navigation buttons are harder to see. The toolbar in Mail is sure rendered beautifully, but it’s a bitch to use. I’m very fortunate insofar that my vision is good enough that I’m able to use my iPhone without too much friction, but what works for me isn’t necessarily going to work for someone else. The easiest buttons in iOS 7 for me to navigate are the segmented controls in Notification Center, as well in the App Store and the iTunes Store. Because the rectangular border adds definition and contrast, reading them is no problem whatsoever.

I don’t pretend to be a user interface designer, but I wish that Apple would revisit many of their design choices, if only in the name of universal accessibility. Perhaps make the borders on toolbar icons thicker, so as to make them stand out more, like boldface does to text. Or perhaps tweak the navigation buttons (e.g., Back) to have them sport a rectangular border, a la the segmented control atop Notification Center. (This goes against Federico’s theory and would be worse aesthetically, but better for me in terms of usability.)

I should note, too, that these gripes are not exclusively the domain of the visually impaired. They also can apply to users whose eyesight may not be what it used to, and who just plain don’t like some of iOS 7’s design choices.

Apple did a good thing by adjusting the thickness of Helvetica Neue during one of the early beta periods. I only hope that, in time, Apple decides to change the button design as well. I, and others in a similar boat, would greatly appreciate it.